<template>
  <el-card>
    <div slot="header">
      <h3>查看售价类型信息</h3>
    </div>
    <div class="saleprice_type_wrap">
      <el-divider content-position="center"><i class="el-icon-info"></i>现价格组及比例</el-divider>
      <el-row>
        <SkusTable
          :dataSource="priceGroup.list"
          :columns="priceGroup.columns"
          :maxTableHeight="480"
        />
      </el-row>
      <el-divider content-position="center"><i class="el-icon-price-tag"></i>{{ priceTableTitle }}</el-divider>
      <!-- 按钮操作栏 -->
      <el-row type="flex" justify="end">
        <el-button
          :disabled="this.tableInfo.list.length === 0"
          :loading="btnLoading.export"
          type="text"
          @click="handleExportTemplate"
        >模板导出</el-button>
      </el-row>
      <el-row>
        <SkusTable
          :dataSource="tableInfo.list"
          :columns="tableInfo.columns"
          :maxTableHeight="480"
        />
      </el-row>
      <FooterFields :recordNo="recordNo" />
    </div>
      <ShowListDialog
        dialogTitle="查看原价格组"
        :visible.sync="originalPriceGroup.visible"
        :tableColumns="originalPriceGroup.columns"
        :tableData="originalPriceGroup.list"
      />
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import ShowListDialog from '@/components/ShowListDialog';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { queryPriceAllInfoService } from '@/api/finance/salePriceManage/editSalePriceType';
import { exportSaleTemplateService } from '@/api/finance/common/salePrice';
import {
  getSalePriceTypeSingleColumns,
  getSalePriceTypeMultipleColumns
} from '@/pages/commodity/modules/constants/salePriceModule/viewSalePriceModule/salePriceType';
import { generateUuid, createExcelByExport } from '@/utils/bizUtils';
export default {
  components: {
    SkusTable,
    ShowListDialog,
    FooterFields
  },
  data () {
    return {
      priceGroup: { // 价格组
        list: [], // 表格数据
        columns: [] // 表列
      },
      originalPriceGroup: {
        list: [], // 表格数据
        columns: [], // 表列
        visible: false
      },
      tableInfo: {
        list: [],
        columns: []
      },
      allTableInfo: {
        upInputList: [], // 单计量列表
        upSteelInputList: [], // 多计量列表
      },
      footerFields: {}, // 表尾字段
      btnLoading: {
        export: false
      }
    }
  },
  mounted () {
    this.setPriceGroupColumns();
    this.getAllPriceInfo();
  },
  computed: {
    // 价格表格标题
    priceTableTitle () {
      if (this.isSingleUnit()) { return '单计量列表'; }
      if (this.isMultipleUnit()) { return '多计量列表'; }
    },
    // 单据号
    recordNo () {
      return this.$route.query?.recordNo || '';
    }
  },
  methods: {
    // 是单计量
    isSingleUnit () {
      return this.allTableInfo.upInputList.length > 0;
    },
    // 是多计量
    isMultipleUnit () {
      return this.allTableInfo.upSteelInputList.length > 0;
    },
    // 获取售价所有信息
    async getAllPriceInfo () {
      const retData = await queryPriceAllInfoService(this.recordNo, '.saleprice_type_wrap');
      if (retData) {
        const { newGroupList, upInputList, upSteelInputList } = retData.t;
        this.allTableInfo = { upInputList, upSteelInputList };
        this.priceGroup.list = newGroupList;
        this.setPriceTableInfo();
      }
    },
    // 设置价格表格信息
    setPriceTableInfo () {
      if (this.isSingleUnit()) {
        this.tableInfo.list = this.allTableInfo.upInputList;
        this.tableInfo.columns = _.cloneDeep(getSalePriceTypeSingleColumns(this));
      }
      if (this.isMultipleUnit()) {
        this.tableInfo.list = this.allTableInfo.upSteelInputList;
        this.tableInfo.columns = _.cloneDeep(getSalePriceTypeMultipleColumns(this));
      }
    },
    // 设置价格组表格表列
    setPriceGroupColumns () {
      const columns = [
        { title: '组名称', key: 'groupName' },
        { title: '主城市', key: 'mainCity' },
        { title: '参照组', key: 'mainGroupName' },
        { title: '价格比例', key: 'rate' },
        {
          title: '包含城市',
          render: (h, { row }) => {
            return <span>{row.provinceNameList ? row.provinceNameList.join(',') : ''}</span>
          }
        }
      ];
      this.priceGroup.columns = _.cloneDeep(columns);
      this.originalPriceGroup.columns = _.cloneDeep(columns);
    },
    // 查看原价格组
    viewOriginalPGFn (row) {
      if (!row.oldGroupList) {
        return this.$message.warning('无原价格组信息');
      }
      this.originalPriceGroup.list = row.oldGroupList;
      this.originalPriceGroup.visible = true;
    },
    // 模板导出
    handleExportTemplate () {
      this.exportData();
    },
    // 导出数据
    async exportData () {
      const uuid = generateUuid();
      const data = {
        uuid,
        isSaleMultiUnit: this.isSingleUnit() ? '2' : '1',
        tableData: this.tableInfo.list
      }
      const res = await exportSaleTemplateService(data, state => { this.btnLoading.export = state; });
      createExcelByExport({ res, excelTitle: `售价类型信息模板_${uuid}` });
    }
  }
}
</script>
